import { useState } from "react";
import { TypingEffect } from './TypingEffect';

export function PortraitAnalysisTitle({ text, explainLabel = "解释此画像", explainLabelStyle, onClickExplain = e => { }, speed = 0, onComplete = () => { } }) {
  const [currentSection, setCurrentSection] = useState(0);
  const DirectOutput = ({ text }) => <span>{text}</span>;
  const OutputComponent = speed === 0 ? DirectOutput : TypingEffect;
  return (
    <>
      <OutputComponent text={text} start={currentSection === 0} speed={speed} onComplete={() => setCurrentSection(1)} />
      <OutputComponent text={explainLabel} style={explainLabelStyle} onClick={onClickExplain} start={currentSection === 1} speed={speed} onComplete={() => onComplete()} />
    </>
  );
}
